import { useState,useEffect,useCallback } from 'react';//生命状态，生命周期;大括号命名导出
import './App.css';
import Home from './Home'
import Topic from './Topic'
import Header from './Header'
import Me from './Me'
import Message from './Message'
import Publish from './Publish'
import Collection from './Collection'
// import {BrowserRouter,Route,Switch} from 'react-router-dom';
import {
  Route,
  Switch,
  BrowserRouter as Router,//MemoryRouter手机端不会显示地址
} from 'react-router-dom'



const style={
  lineHeight:'100px',
  textAlign:'center',
  height:100,
  fontWeight:'bold',
  background:'pink'
}



const App=()=>{
  return(
    <Router>
    <header style={style}><Header/></header>
    <Switch>
      {/* 配五个 */}
        <Route exact path='/'>
        <Home/>
        </Route>
        {/* 配置动态路由 */}
        <Route path='/topic/:id' component={Topic}></Route>
        <Route path='/collection'>
          <Collection/>
        </Route>
        <Route path='/publish'>
          <Publish/>
        </Route>
        <Route path='/message'>
          <Message/>
        </Route>
        <Route path='/me'>
          <Me/>
        </Route>
    </Switch>
    </Router>
  )
}








export default App;
